<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.w3.org/1999/xhtml" layout:decorator="/layouts/default">
<th:block layout:fragment="title">
    数据库列表
</th:block>
<!-- head -->
<th:block layout:fragment="head">
    <!--页面自定义样式-->
    <style>
        /** style */
    </style>
</th:block>
<!-- content -->
<th:block layout:fragment="content">


            <!--数据区域-->
            <el-row class="fn-clear">
                <el-col class="fn-tal" :span="18">
                    <el-button @click="openDialog('new')" type="primary" plain>添加</el-button>
                </el-col>
            </el-row>

            <el-table fixed class="fn-mt10" :data="data_group.list" highlight-current-row @selection-change="onSelectionChange">
                <el-table-column  prop="dbName" label="名称（唯一）" align="center" min-width="10%" show-overflow-tooltip="true"></el-table-column>
                <el-table-column  prop="url" label="URL" align="center" min-width="15%" show-overflow-tooltip="true"></el-table-column>
                <el-table-column  prop="driver" label="driver" align="center" min-width="15%" show-overflow-tooltip="true"></el-table-column>
                <el-table-column  prop="username" label="用户名" align="center" min-width="10%" show-overflow-tooltip="true"></el-table-column>
                <el-table-column  prop="password" label="密码" align="center" min-width="10%" show-overflow-tooltip="true"></el-table-column>
                <el-table-column  prop="schema" label="schema" align="center" min-width="15%" show-overflow-tooltip="true"></el-table-column>
                <el-table-column align="center" label="操作" min-width="15%">
                    <template scope="scope">
                        <el-button @click="deleteById(scope.row)"  icon="el-icon-delete" circle size="small"></el-button>
                        <el-button @click="openDialog('edit',scope.row.id)" icon="el-icon-edit" circle size="small"></el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" min-width="5%" label="操作"  fixed="right">
                    <template scope="scope" >
                        <el-button @click="showTables(scope.row.id)" type="text" size="small">查看表</el-button>
                    </template>
                </el-table-column>
            </el-table>


    <!-- 新建/编辑弹出框start -->
  <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="99%">
        <el-form label-width="150px" :model="form" :rules="rules" ref="form" label-position="right">
            <el-row><el-col :span="24">信息<br/><hr/><br/></el-col></el-row>
            <el-row>
                <el-col :span="12" class="fn-pr20">
                    <el-form-item class="fn-ml30" label="名称（唯一）：" prop="dbName">
                        <el-input v-model="form.dbName" ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="fn-pr20">
                    <el-form-item class="fn-ml30" label="URL：" prop="url">
                        <el-input v-model="form.url" ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" class="fn-pr20">
                    <el-form-item class="fn-ml30" label="driver：" prop="driver">
                        <el-select v-model="form.driver" clearable placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="fn-pr20">
                    <el-form-item class="fn-ml30" label="用户名：" prop="username">
                        <el-input v-model="form.username" ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" class="fn-pr20">
                    <el-form-item class="fn-ml30" label="密码：" prop="password">
                        <el-input v-model="form.password" ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="fn-pr20">
                    <el-form-item class="fn-ml30" label="schema：" prop="schema">
                        <el-input v-model="form.schema" ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="danger" @click="testConn">测试</el-button>
            <el-button type="primary" @click="submitForm('form')">确 定</el-button>
        </div>
    </el-dialog>
    <!-- 新建/编辑弹出框end   -->


</th:block>

<!-- js -->
<th:block layout:fragment="js">
<!--页面js-->
    <script th:src="@{/js/code/database.js}"></script>


</th:block>
</html>
